<template>
  <div class="app-container">
    <!-- 申请表 -->
    <div class="form-blok">
      <div class="source">
        <!-- 标题 -->
        <el-row>
          <h1>广西水利电力职业技术学院家庭经济困难学生认定申请表</h1>
        </el-row>
        <!-- 基础信息 -->
        <el-form :model="formData" ref="formData" label-width="0px" size="mini">
          <table class="full-width">
            <tr>
              <td class="table-label rl" rowspan="10">学生基本情况</td>
              <td class="table-label">姓名</td>
              <td class="table-input">
                <el-form-item prop="xm" :rules="rules">
                  <el-input :disabled="this.formData.step >2" v-model="formData.xm" placeholder="请输入姓名"></el-input>
                </el-form-item>
              </td>
              <td class="table-label">性别</td>
              <td class="table-input">
                <el-form-item prop="xb" :rules="rules">
                  <el-input :disabled="this.formData.step >2" v-model="formData.xb" placeholder="请输入性别"></el-input>
                </el-form-item>
              </td>
              <td class="table-label">民族</td>
              <td class="table-input">
                <el-form-item prop="mz" :rules="rules">
                  <el-input :disabled="this.formData.step >2" v-model="formData.mz" placeholder="请输入民族"></el-input>
                </el-form-item>
              </td>
              <td class="table-label">出生年月</td>
              <td class="table-input">
                <el-form-item prop="csny" :rules="rules">
                  <el-date-picker :disabled="this.formData.step >2" value-format="yyyy-MM" format="yyyy-MM"
                    v-model="formData.csny" style="width: 110px;" type="date" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </td>
            <tr>
              <td class="table-label">身份证号</td>
              <td class="table-input" colspan="3">
                <el-form-item prop="sfzhm" :rules="rules">
                  <el-input :disabled="this.formData.step >2" v-model="formData.sfzhm"
                    placeholder="请输入身份证"></el-input>
                </el-form-item>
              </td>
              <td class="table-label">学（籍）号</td>
              <td class="table-input" colspan="3">
                <el-form-item prop="xh" :rules="rules">
                  <el-input @blur="inputHandler" :disabled="this.formData.step >2" v-model="formData.xh"
                    placeholder="请输入学号"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="table-label" rowspan="4">家庭情况</td>
              <td class="table-label">
                家庭人口数
              </td>
              <td class="table-input" colspan="2">
                <el-form-item prop="rkzs" :rules="rules">
                  <el-input :disabled="this.formData.step >2" v-model="formData.rkzs"
                    placeholder="请输入家庭人口数"></el-input>
                </el-form-item>
              </td>
              <td class="table-label">
                家庭成员在学人数
              </td>
              <td class="table-input" colspan="3">
                <el-form-item prop="jtcyzxrs" :rules="rules">
                  <el-input :disabled="this.formData.step >2" v-model="formData.jtcyzxrs"
                    placeholder="请输入在学人数"></el-input>
                </el-form-item>
              </td>
              <!-- 选择信息 -->
            <tr>
              <td class="table-label">
                家庭成员失业人数
              </td>
              <td class="table-input" colspan="2">
                <el-form-item prop="jtcysyrs" :rules="rules">
                  <el-input :disabled="this.formData.step >2" v-model="formData.jtcysyrs"
                    placeholder="请输入失业人数"></el-input>
                </el-form-item>
              </td>
              <td class="table-label">
                赡养人数
              </td>
              <td class="table-input" colspan="3">
                <el-form-item prop="syrs" :rules="rules">
                  <el-input :disabled="this.formData.step >2" v-model="formData.syrs"
                    placeholder="请输入赡养人数"></el-input>
                </el-form-item>
              </td>
            <tr>
              <td class="table-input" colspan="7" style="text-align: left;">
                <h4>家庭情况（如实在相应类型□中打“√”）</h4>
                <div>
                  <el-row class="radio-group-row">
                    <div class="radio-group">
                      <el-form-item prop="knlx" :rules="selerules">
                        <el-radio-group v-model="formData.knlx">
                          <el-radio :label="'1'" :disabled="formData.step >2">脱贫家庭学生</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </div>
                    <div v-show="formData.knlx == '1'">
                      <el-form-item prop="knlx2">
                        <span style="margin-right:10px;">脱贫年度: </span>
                        <el-radio-group v-model="formData.knlx2">
                          <el-radio :label="'1'" :disabled="formData.step >2">2014年/2015年</el-radio>
                          <el-radio :label="'2'" :disabled="formData.step >2">2016年及以后</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </div>
                  </el-row>
                </div>
                <div>
                  <el-row class="radio-group-row">
                    <div class="radio-group">
                      <el-radio-group v-model="formData.knlx">
                        <el-radio :label="'2'" :disabled="formData.step >2">监测对象家庭学生</el-radio>
                      </el-radio-group>
                    </div>
                    <div v-show="formData.knlx == '2'">
                      <el-form-item prop="knlx2">
                        <el-radio-group v-model="formData.knlx2">
                          <el-radio :label="'1'" :disabled="formData.step >2">脱贫不稳定家庭学生</el-radio>
                          <el-radio :label="'2'" :disabled="formData.step >2">边缘易致贫家庭学生</el-radio>
                          <el-radio :label="'3'" :disabled="formData.step >2">突发严重困难家庭学生</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </div>
                  </el-row>
                </div>
                <div>
                  <el-row class="radio-group-row">
                    <div class="radio-group">

                      <el-radio-group v-model="formData.knlx">
                        <el-radio :label="'3'" :disabled="formData.step >2">特困救助供养学生</el-radio>
                      </el-radio-group>

                    </div>
                    <div v-show="formData.knlx == '3'">
                      <el-form-item prop="knlx2">
                        <el-radio-group v-model="formData.knlx2">
                          <el-radio :label="'1'" :disabled="formData.step >2">城市</el-radio>
                          <el-radio :label="'2'" :disabled="formData.step >2">农村</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </div>
                  </el-row>
                </div>
                <div>
                  <el-row class="radio-group-row">
                    <div class="radio-group" @click="()=>{formData.knlx2==0}">
                      <el-radio-group v-model="formData.knlx">
                        <el-radio :label="'5'" :disabled="formData.step >2">家庭经济困难残疾学生</el-radio>
                      </el-radio-group>

                      <el-radio-group v-model="formData.knlx">
                        <el-radio :label="'6'" :disabled="formData.step >2">家庭经济困难残疾人子女</el-radio>
                      </el-radio-group>
                      <el-radio-group v-model="formData.knlx">
                        <el-radio :label="'7'" :disabled="formData.step >2">孤儿</el-radio>
                      </el-radio-group>

                      <el-radio-group v-model="formData.knlx">
                        <el-radio :label="'8'" :disabled="formData.step >2">事实无人抚养儿童</el-radio>
                      </el-radio-group>
                      <el-radio-group v-model="formData.knlx">
                        <el-radio :label="'9'" :disabled="formData.step >2">烈士子女</el-radio>
                      </el-radio-group>

                      <el-radio-group v-model="formData.knlx">
                        <el-radio :label="'10'" :disabled="formData.step >2">建档困难职工家庭学生</el-radio>
                      </el-radio-group>
                    </div>
                  </el-row>
                </div>
                <el-row class="radio-group-row">
                  <div class="radio-group">
                    <el-radio-group v-model="formData.knlx">
                      <el-radio :label="'11'" :disabled="formData.step >2">低收入对象</el-radio>
                    </el-radio-group>
                  </div>
                  <div v-show="formData.knlx == '11'">
                    <el-form-item prop="knlx2">
                      <el-radio-group v-model="formData.knlx2">
                        <el-radio :label="'1'" :disabled="formData.step >2">低保边缘家庭学生</el-radio>
                        <el-radio :label="'2'" :disabled="formData.step >2">支出型困难家庭学生</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </div>
                </el-row>
                <el-row class="radio-group-row">
                  <div class="radio-group">

                    <el-radio-group v-model="formData.knlx">
                      <el-radio :label="'12'" :disabled="formData.step >2">其他家庭经济困难学生</el-radio>
                    </el-radio-group>

                  </div>
                  <div v-show="formData.knlx == '12'">
                    <el-form-item prop="knlx2">
                      （请简述原因） <el-input v-model="formData.knlx2" placeholder="请输入"
                        :disabled="formData.step >2"></el-input>
                    </el-form-item>
                  </div>
                </el-row>
              </td>
            </tr>
          </table>
          <table class="full-width">
            <!-- 家庭信息 -->
            <tr>
            <tr>
              <td rowspan="4" style="writing-mode:vertical-rl;" class="table-label">家庭信息</td>
            </tr>
            <tr>
              <td class="table-label">户籍性质</td>
              <td class="table-input table-align-left">
                <el-form-item prop="hjxz" :rules="selerules">
                  <el-radio-group v-model="formData.hjxz">
                    <el-radio :label="'1'" :disabled="formData.step >1">城镇</el-radio>
                    <el-radio :label="'2'" :disabled="formData.step >1">农村</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
              <td class="table-label">户籍所在地</td>
              <td class="table-input" colspan="2">
                <el-form-item prop="hjszd" style="max-height: 80px;" :rules="rules">
                  <el-input type="textarea" :rows="2" placeholder=" 省(区)/市/县" v-model="formData.hjszd"
                    :disabled="formData.step >1">
                  </el-input>
                </el-form-item>
              </td>
              <td class="table-label">家长姓名及联系电话</td>
              <td class="table-input" colspan="2">
                <el-form-item prop="jzdh" :rules="rules">
                  <el-input v-model="formData.jzdh" placeholder="家长姓名及联系电话" :disabled="formData.step >1"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="table-label">家庭居住房产（住房）情况</td>
              <td class="table-input table-align-left" colspan="3">
                <el-form-item prop="jtjzfqk" :rules="selerules">
                  <el-radio-group v-model="formData.jtjzfqk">
                    <el-radio :label="'1'" :disabled="formData.step >1">商品房</el-radio>
                    <el-radio :label="'2'" :disabled="formData.step >1">单位福利住房</el-radio>
                    <el-radio :label="'3'" :disabled="formData.step >1">自建房</el-radio>
                    <el-radio :label="'4'" :disabled="formData.step >1">租房、无房</el-radio>
                    <el-radio :label="'5'" :disabled="formData.step >1">其他</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
              <td class="table-label">家中有汽车情况</td>
              <td class="table-input table-align-left" colspan="3">
                <el-form-item prop="jtqcqk" :rules="selerules">
                  <el-radio-group v-model="formData.jtqcqk">
                    <el-radio :label="'1'" :disabled="formData.step >1">自用</el-radio>
                    <el-radio :label="'2'" :disabled="formData.step >1">经营用</el-radio>
                    <el-radio :label="'3'" :disabled="formData.step >1">无汽车</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="table-label">家庭居住现居住地址</td>
              <td class="table-input" colspan="7">
                <div>
                  <el-form-item prop="jtxjzdz" :rules="rules">
                    <el-input :disabled="formData.step >1" placeholder="省（自治区）/市/县（市、区）/镇（街道）/村（居委）/（门牌号）"
                      v-model="formData.jtxjzdz">
                    </el-input>
                  </el-form-item>
                </div>
              </td>
            </tr>
            <!-- 家庭成员情况 -->
            <tr>
            <tr>
              <td rowspan="4" style="writing-mode:vertical-rl;" class="table-label">家庭成员情况</td>
            </tr>
            <tr>
              <td style="padding:0px;" colspan="7">
                <el-table :data="formData.jtcyObj" border style="width: 100%" :row-class-name="handelIndex">
                  <el-table-column prop="xm" label="姓名" align="center">
                    <template slot-scope="{ row, $index }">
                      <el-form-item label-width="0px" :prop="'jtcyObj[' + $index +'].xm'" :rules="rules">
                        <el-input v-model="row.xm" placeholder="姓名" :disabled="formData.step >1"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="nl" label="年龄" width="100" align="center">
                    <template slot-scope="{ row, $index }">
                      <el-form-item label-width="0px" :prop="'jtcyObj[' + $index +'].nl'" :rules="rules">
                        <el-input v-model="row.nl" placeholder="年龄" :disabled="formData.step >1"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="gx" label="与学生关系" align="center">
                    <template slot-scope="{ row, $index }">
                      <el-form-item label-width="0px" :prop="'jtcyObj[' + $index +'].gx'" :rules="rules">
                        <el-input v-model="row.gx" placeholder="与学生关系" :disabled="formData.step >1"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="dw" label="工作（学习）单位" align="center">
                    <template slot-scope="{ row, $index }">
                      <el-form-item label-width="0px" :prop="'jtcyObj[' + $index +'].dw'" :rules="rules">
                        <el-input v-model="row.dw" placeholder="工作（学习）单位" :disabled="formData.step >1"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="zy" label="职业" align="center">
                    <template slot-scope="{ row, $index }">
                      <el-form-item label-width="0px" :prop="'jtcyObj[' + $index +'].zy'" :rules="rules">
                        <el-input v-model="row.zy" placeholder="职业" :disabled="formData.step >1"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="nsr" label="年收入（元）" align="center">
                    <template slot-scope="{ row, $index }">
                      <el-form-item label-width="0px" :prop="'jtcyObj[' + $index +'].nsr'" :rules="rules">
                        <el-input v-model="row.nsr" placeholder="年收入（元）" :disabled="formData.step >1"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="jkzk" label="健康状况" align="center">
                    <template slot-scope="{ row, $index }">
                      <el-form-item label-width="0px" :prop="'jtcyObj[' + $index +'].jkzk'" :rules="rules">
                        <el-input v-model="row.jkzk" placeholder="健康状况" :disabled="formData.step >1"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" width="100px" v-if="formData.step==1 || this.formData.step == 0">
                    <template slot-scope="data">
                      <el-button type="text" @click="handelDel(data.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div style="padding:10px;" v-if="formData.step==1">
                  <el-button @click="handleAddRow" type="text">新增一行</el-button>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <div style="display: flex;align-items: center;">
                  家庭年收入
                  <el-form-item prop="jtnsr">
                    <el-input type="number" v-model="income" placeholder="自动计算家庭年收入" disabled />
                  </el-form-item>
                  元
                </div>
              </td>
              <td colspan="5">
                <div style="display: flex;align-items: center;">
                  人均年收入
                  <el-form-item prop="rjnsr">
                    <el-input type="number" v-model="capita" placeholder="自动计算人均年收入" disabled />
                  </el-form-item>
                  元
                </div>
              </td>
            </tr>

            <!-- 影响家庭经济状况信息 -->
            <tr>
            <tr>
              <td rowspan="4" style="writing-mode:vertical-rl;" class="table-label">影响家庭经济状况信息</td>
            </tr>
            <tr>
              <td style="text-align: left;" colspan="7">
                <h4>1.家庭经济主要收入来源情况（如实在相应类型□中打“√”）</h4>
                <div>
                  <el-row class="radio-group-row">
                    <div class="radio-group">
                      <el-form-item prop="jtzysr" :rules="selerules">
                        <el-radio-group v-model="formData.jtzysr">
                          <el-radio :label="'1'" :disabled="formData.step >1">关事业单位公职人员</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="formData.jtzysr">
                          <el-radio :label="'2'" :disabled="formData.step >1">单位公司合同制职工</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="formData.jtzysr">
                          <el-radio :label="'3'" :disabled="formData.step >1">私营业主</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="formData.jtzysr">
                          <el-radio :label="'4'" :disabled="formData.step >1">个体工商户</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="formData.jtzysr">
                          <el-radio :label="'5'" :disabled="formData.step >1">务工</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="formData.jtzysr">
                          <el-radio :label="'6'" :disabled="formData.step >1">务农</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="formData.jtzysr">
                          <el-radio :label="'8'" :disabled="formData.step >1">无固定收入</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="formData.jtzysr">
                          <el-radio :label="'9'" :disabled="formData.step >1">无收入</el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <el-row class="radio-group-row">
                        <div class="radio-group">
                          <el-radio-group v-model="formData.jtzysr">
                            <el-radio :label="'7'" :disabled="formData.step >1">其他收入（简要说明） </el-radio>
                          </el-radio-group>
                        </div>
                        <div v-if="formData.jtzysr == '7'">
                          <el-form-item prop="jtzysr2" :rules="rules">
                            （请简述原因） <el-input v-model="formData.jtzysr2" :disabled="formData.step >1"
                              placeholder="请其他收入（简要说明）"></el-input>
                          </el-form-item>
                        </div>
                      </el-row>

                    </div>
                  </el-row>
                </div>
                <div style="margin-top: 10px;">
                  <el-row class="radio-group-row">
                    <el-form-item prop="jtzysr" :rules="rules">
                      <div class="radio-group">
                        2.学生父母丧失劳动能力或劳动能力弱 <el-input :disabled="formData.step >1" v-model="formData.ssldnl"
                          placeholder="" style="width: 100px; border-bottom: 1px solid #e5e5e5;"></el-input>人；
                        需赡养丧失劳动能力的共同生活家庭成员<el-input :disabled="formData.step >1" v-model="formData.zyssldnl"
                          placeholder="" style="width: 100px; border-bottom: 1px solid #e5e5e5;"></el-input>人（其中长期患病或残疾
                        <el-input :disabled="formData.step >1" v-model="formData.hbcjr" placeholder=""
                          style="width: 100px; border-bottom: 1px solid #e5e5e5;"></el-input>
                        人）。
                      </div>
                    </el-form-item>
                  </el-row>
                </div>
                <h4>3.如有以下情形，请如实勾选并简要描述：</h4>
                <div>
                  <!-- 家庭遭受疫情 □家庭遭受自然灾害 □家庭遭受突发意外事件  □家庭欠债 -->
                  <el-row class="radio-group-row">
                    <div class="radio-group">
                      <el-radio-group v-model="formData.tfsj">
                        <el-radio :label="'1'" :disabled="formData.step >1">家庭遭受疫情</el-radio>
                      </el-radio-group>
                      <el-radio-group v-model="formData.tfsj">
                        <el-radio :label="'2'" :disabled="formData.step >1">家庭遭受自然灾害</el-radio>
                      </el-radio-group>
                      <el-radio-group v-model="formData.tfsj">
                        <el-radio :label="'3'" :disabled="formData.step >1">家庭遭受突发意外事件</el-radio>
                      </el-radio-group>
                      <el-row class="radio-group-row">
                        <div class="radio-group">
                          <el-radio-group v-model="formData.tfsj">
                            <el-radio :label="'4'" :disabled="formData.step >1">家庭欠债</el-radio>
                          </el-radio-group>
                        </div>
                        <div v-show="formData.tfsj == '4'">
                          具体时间、内容及涉及金额等情况<el-input :disabled="formData.step >1" v-model="formData.tfsj2"
                            placeholder=""></el-input>
                        </div>
                      </el-row>
                      <el-row class="radio-group-row">
                        <div class="radio-group">
                          <el-radio-group v-model="formData.tfsj">
                            <el-radio :label="'5'" :disabled="formData.step >1">其它情况</el-radio>
                          </el-radio-group>
                        </div>
                        <div v-show="formData.tfsj == '5'">
                          （请简述原因） <el-input :disabled="formData.step >1" v-model="formData.tfsj3"
                            placeholder="请填写其他情况"></el-input>
                        </div>
                      </el-row>
                    </div>
                  </el-row>
                </div>
              </td>
            </tr>
          </table>
          <!-- 承诺书 -->
          <table class="full-width2">
            <tr>
              <td class="table-label rl"></td>
              <td style="text-align: left;">
                <div>本人承诺以上所填资料真实、准确，并同意授权相关部门通过信息核对，对所填资料进行查询、核对。
                  如虚报资料，本人愿意承担相关责任。</div>
                <div style="display: flex; justify-content: flex-end;margin-right: 100px;">
                  <span> 手写签字：</span>
                    <span>
                      <el-upload :disabled="formData.step >1" class="avatar-uploader" :action="upload.url"
                        :headers="upload.headers" :show-file-list="false" :on-success="handleSignatureSuccess">
                        <img v-if="formData.sqrqm" :src="baseurl+formData.sqrqm" class="signature-img">
                        <span class="signature-tip" v-else>签名</span>
                      </el-upload>
                    </span>
                </div>

                <div style="text-align: right;">{{formData.sqrqmrq}}</div>
              </td>
            </tr>
          </table>
          <!-- 班级评议意见 -->
          <table class="full-width2">
            <tr>
              <td class="table-label rl" style="width: 100px;">辅导员意见</td>
              <td style="text-align: left;">
                <div style="margin: 10px 10px;">经班级评议小组民主评议，认为该生（□符合 □不符合）家庭经济困难学生认定条件，推荐认定困难类型为：</div>
                <el-row class="radio-group-row">
                  <div class="radio-group">
                    <el-radio-group v-model="formData.bjpyyj">
                      <el-radio :label="'1'" :disabled="formData.step!=2 || this.state==1">特别困难</el-radio>
                    </el-radio-group>
                    <el-radio-group v-model="formData.bjpyyj">
                      <el-radio :label="'2'" :disabled="formData.step!=2 || this.state==1">比较困难</el-radio>
                    </el-radio-group>
                    <el-radio-group v-model="formData.bjpyyj">
                      <el-radio :label="'3'" :disabled="formData.step!=2 || this.state==1">一般困难</el-radio>
                    </el-radio-group>
                    <el-radio-group v-model="formData.bjpyyj">
                      <el-radio :label="'4'" :disabled="formData.step!=2 || this.state==1">不困难</el-radio>
                    </el-radio-group>
                  </div>
                </el-row>
                <div style="display: flex; justify-content: flex-end;margin-right: 100px;margin-top: 5px;">
                  <span> 辅导员签字：</span>
                  <span>
                    <el-upload :disabled="this.formData.step != 2 || this.state==1" class="avatar-uploader" :action="upload.url"
                      :headers="upload.headers" :show-file-list="false" :on-success="handleFdySignatureSuccess">
                      <img v-if="formData.fdyqm" :src="baseurl+formData.fdyqm" class="signature-img">
                      <span class="signature-tip" v-else>签名</span>
                    </el-upload>
                  </span>
                </div>
                <div style="text-align: right;">{{formData.fdyqmrq}}</div>
              </td>
            </tr>
          </table>

          <!-- 二级学院认定意见 -->
          <table class="full-width2">
            <tr>
              <td class="table-label rl" style="width: 100px;">二级学院认定意见</td>
              <td style="text-align: left;">
                <div style="margin: 10px 10px;">经学院认定工作组审查，本学年该□同学符合；□不符合家庭经济困难学生认定条件；认定困难类型为：</div>
                <el-row class="radio-group-row">
                  <div class="radio-group">
                    <el-radio-group v-model="formData.ejxyldqmyj">
                      <el-radio :label="'1'" :disabled="formData.step!=3 || this.state==1">特别困难</el-radio>
                    </el-radio-group>
                    <el-radio-group v-model="formData.ejxyldqmyj">
                      <el-radio :label="'2'" :disabled="formData.step!=3 || this.state==1">比较困难</el-radio>
                    </el-radio-group>
                    <el-radio-group v-model="formData.ejxyldqmyj">
                      <el-radio :label="'3'" :disabled="formData.step!=3 || this.state==1">一般困难</el-radio>
                    </el-radio-group>
                    <el-radio-group v-model="formData.ejxyldqmyj">
                      <el-radio :label="'4'" :disabled="formData.step!=3 || this.state==1">不困难</el-radio>
                    </el-radio-group>
                  </div>
                </el-row>
                <div style="display: flex; justify-content: flex-end;margin-right: 100px;margin-top: 5px;">
                  <span> 二级学院负责人签字：</span>
                  <span>
                    <el-upload :disabled="this.formData.step != 3 || this.state==1" class="avatar-uploader" :action="upload.url"
                      :headers="upload.headers" :show-file-list="false" :on-success="handleEjxyldSignatureSuccess">
                      <img v-if="formData.ejxyldqm" :src="baseurl+formData.ejxyldqm" class="signature-img">
                      <span class="signature-tip" v-else>签名</span>
                    </el-upload>
                  </span>
                </div>
                <div style="text-align: right;"> {{formData.ejxyldqmrq}}</div>
                <div style="text-align: right;">（加盖二级学院公章）</div>
              </td>
            </tr>
          </table>
          <!-- 学校审核意见 -->
          <table class="full-width2">
            <tr>
            <tr>
              <td rowspan="4" style="writing-mode:vertical-rl; width: 100px;" class="table-label">学校审核意见</td>
            </tr>
            <td style="text-align: left;">
              <div style="margin: 10px 10px;">经学校学生资助工作领导小组审查，经5个工作日公示无异议，认定该生（□符合 □不符合）家庭经济困难学生认定条件，同意认定困难类型为：</div>
              <el-row class="radio-group-row">
                <div class="radio-group">
                  <el-radio-group v-model="formData.xsqmyj">
                    <el-radio :label="'1'" :disabled="formData.step!=4 || this.state==1">特别困难</el-radio>
                  </el-radio-group>
                  <el-radio-group v-model="formData.xsqmyj">
                    <el-radio :label="'2'" :disabled="formData.step!=4 || this.state==1">比较困难</el-radio>
                  </el-radio-group>
                  <el-radio-group v-model="formData.xsqmyj">
                    <el-radio :label="'3'" :disabled="formData.step!=4 || this.state==1">一般困难</el-radio>
                  </el-radio-group>
                  <el-radio-group v-model="formData.xsqmyj">
                    <el-radio :label="'4'" :disabled="formData.step!=4 || this.state==1">不困难</el-radio>
                  </el-radio-group>
                </div>
              </el-row>
              <div style="display: flex; justify-content: flex-end;margin-right: 100px;margin-top: 5px;">
                <span> 学校负责人签字：</span>
                <span>
                  <el-upload :disabled="this.formData.step != 4 || this.state==1" class="avatar-uploader" :action="upload.url"
                    :headers="upload.headers" :show-file-list="false" :on-success="handleXuexiaoSignatureSuccess">
                    <img v-if="formData.xsqm" :src="baseurl+formData.xsqm" class="signature-img">
                    <span class="signature-tip" v-else>签名</span>
                  </el-upload>
                </span>
              </div>
              <div style="text-align: right;"> {{formData.xsqmrq}}</div>
              <div style="text-align: right;">（加盖学校公章）</div>
            </td>
            </tr>

          </table>
          <table style="border-collapse: collapse; width: 1095px;">
            <tr>
              <td class="" style="
    background: #ededed;">佐证材料{{this.state}}</td>
              <td class="" colspan="7" style="min-width: 500px;" >
                <Affix @input="handleAffix" v-model="formData.affixId"  :maxSize="2"></Affix>
              </td>
            </tr>
          </table>
          <el-form-item style="margin: 10px 10px;">
            <el-button type="success" v-if="formData.step == 1 || formData.step==0" @click="onSubmit(0)">保存信息</el-button>
            <el-button type="primary" v-if="formData.step == 1 || formData.step==0" @click="onSubmit(1)">提交申请</el-button>
            <el-button type="primary" v-if="formData.step == 2 && this.state==0" @click="onSubmit(2)">确认提交</el-button>
            <el-button type="primary" v-if="formData.step == 3 && this.state==0" @click="onSubmit(3)">确认提交</el-button>
            <el-button type="primary" v-if="formData.step == 4 && this.state==0" @click="onSubmit(4)">确认提交</el-button>
            <!-- <el-button v-if="formData.step != 1 && formData.step != 5" type="danger" @click="on">审核不通过</el-button> -->
          </el-form-item>
        </el-form>
        注：1.本表供学生根据需要申请家庭经济困难认定用，可复印。2.选择性项目必须填写。3.学校审核意见负责人签章（盖章）：高等学校为校学生资助工作领导小组组长或学生资助中心主要负责人签章，加盖资助中心公章；其他学段学校为学校校长签章，加盖学校公章。
      </div>
      <div>
        <div>
          审批流程
        </div>
        <div class="list">
          <div class="item" v-for="(item,index) in recordList" :key="index">
            <div>
              <span>{{item.createTime}}</span>
              <span>{{item.approver}}</span>
              <span v-if="item.step == 1">提交申请</span>
              <span v-if="item.step == 2">辅导员审核</span>
              <span v-if="item.step == 3">二级领导审核</span>
              <span v-if="item.step == 4">学校意见</span>
            </div>
            <div v-if="item.status == '0'">
              <span>审核不通过: </span>
              <span>{{item.remark}}</span>
            </div>
            <div v-else>
              <span v-if="item.step != 1">
                审核通过
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getToken
  } from "@/utils/auth";
  import request from '@/utils/request'
  import {
    listApply,
    getApply,
    delApply,
    addApply,
    updateApply,
    fdysh,
    ejxysh,
    xxyj,
    nopass,
    getDetail,
    getxh
  } from "@/api/zxj/poverty/apply";
  import {
    listRecord
  } from "@/api/zxj/poverty/record";
  import {
    number
  } from "echarts";
  import Cookies from 'js-cookie';
  import {
    getOwnFamily,
    addOwnFamily,
    deleteOwnFamily,
    editOwnFamily
  } from "@/api/stuCQS/basedata/member";
  import {
    Message
  } from 'element-ui';
  export default {
    data() {
      return {
        upload: {
          headers: {
            Authorization: "Bearer " + getToken()
          },

          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/common/upload"
        },
        baseurl: process.env.VUE_APP_BASE_API + "/",
        formData: {
          "affixId": null,
          "createBy": "",
          "createTime": "",
          "updateBy": "",
          "updateTime": "",
          "remark": "",
          "id": "",
          "step": 1,
          "xm": "",
          "xb": "",
          "mz": "",
          "sfzhm": "",
          "xh": "",
          "csny": "",
          "knlx": "",
          "knlx2": "",
          "rkzs": "",
          "srly": "",
          "hjxz": "",
          "hjszd": "",
          jtcyObj: [
            //   {
            //   "xm": "",
            //   "nl": "",
            //   "yxsgx": "",
            //   "gzdw": "",
            //   "zy": "",
            //   "nsr": "",
            //   "jkzk": "",
            //   "gx": ""
            // }
          ],
          jtcy: [{
            xm: "",
            nl: "",
            yxsgx: "",
            gzdw: "",
            zy: "",
            nsr: "",
            jkzk: "",
            gx: ""
          }],
          "jtjzfqk": null,
          "jtqcqk": null,
          "jtxjzdz": null,
          "jzdh": null,
          "jtnsr": null,
          "rjnsr": null,
          "jtzysr": null,
          "ssldnl": null,
          "hbcjr": null,
          "zyssldnl": null,
          "tfsj": null,
          "sqrqm": null,
          "sqrqmrq": "",
          "bjpyyj": null,
          "pyxzzzqm": null,
          "pyxzzzqmrq": null,
          "ejxyfzrqm": "",
          "fdyqm": null,
          "fdyqmrq": "",
          "ejxyldqmyj": null,
          "ejxyldqm": "",
          "ejxyldqmrq": "",
          "xsqmyj": null,
          "xsqm": "",
          "xsqmrq": "",
          "createId": null,
          "xsqmyjstate": null,
          "ejxyldqmyjstate": null,
          "bjpyyjstate": null
        },
        state:0,
        rules: [{
          required: true,
          message: '此项必填'
        }],
        selerules: [{
          required: true,
          message: '必选一项'
        }],
        index: null,
        recordList: [],
        data:[],
        indexs: 0
      }
    },
    created() {
      //获取
      let date = new Date();
      let month = date.getMonth() + 1
      if (this.formData.step == 1) {
        this.formData.sqrqmrq = date.getFullYear() + "年" + month + "月" + date.getDate() + "日";
      }
      let id = this.$route.query.id
      this.state  = this.$route.query.she?this.$route.query.she:0
      this.data = JSON.parse(localStorage.getItem("knList"))
      // let id = 22;
      if (id) {
        getApply(id).then(response => {
          this.formData = {
            ...this.formData,
            ...response.data
          }
          this.formData.jtcyObj = JSON.parse(response.data.jtcy);
          if (this.$route.query.show) { //学生进来只进行查看
            this.formData.step = 5
          }
          console.log(this.$route.query.edit && this.formData.step == 2);
          if (this.$route.query.edit && this.formData.step == 2) { //学生进来，且辅导员没有审核
            this.formData.step = 1
          }
          if (this.formData.step == 2) {
            this.formData.fdyqmrq = date.getFullYear() + "年" + month + "月" + date.getDate() + "日";
          }
          if (this.formData.step == 3) {
            this.formData.ejxyldqmrq = date.getFullYear() + "年" + month + "月" + date.getDate() + "日";
          }
          if (this.formData.step == 4) {
            this.formData.xsqmrq = date.getFullYear() + "年" + month + "月" + date.getDate() + "日";
          }
        });
      } else {
        // this.formData.xh = Cookies.get('username')
        getxh().then(res => {
          if (res.code == 200) {
            this.formData.xh = res.data.stuNo;
            this.formData.sfzhm = res.data.idCard
            this.formData.xm = res.data.name
            this.formData.xb = res.data.gender
            this.formData.csny = res.data.birthday
            this.formData.jtxjzdz = res.data.address
            var arr = res.data.srsFemilyMenberList
            if (this.formData.jtcyObj.length <= 1) {
              for (var i = 0; i < arr.length; i++) {
                var obj = {}
                obj.xm = arr[i].kinsfolkName
                obj.nl = arr[i].fatehrAge
                obj.gx = arr[i].kinsfolkRelate
                obj.gzdw = arr[i].workUnit
                obj.zy = arr[i].duty
                obj.jkzk = arr[i].healthCondition
                this.formData.jtcyObj.push(obj)
              }
            }
          }
        })
      }
    },
    methods: {
      getApplyxq(id){
        console.log(66)
        getApply(id).then(response => {
          this.formData = {
            ...this.formData,
            ...response.data
          }
          console.log(response)
          })
      },
      handleAffix(affixId) {
        this.formData.affixId = affixId;
      },
      inputHandler() {
        this.formData.xh = this.formData.xh.replace(" ", "")
        if (this.formData.xh.length >= 10) {
          getxh(this.formData).then(res => {
            this.formData.sfzhm = res.data.idCard
            this.formData.xm = res.data.name
            this.formData.xb = res.data.gender
            this.formData.csny = res.data.birthday
            this.formData.jtxjzdz = res.data.address
          getOwnFamily().then(obj => {
            if (obj.code == 200) {
              var arr = obj.data

              if (arr.length >0) {
                for (var i = 0; i < arr.length; i++) {
                  var obj = {}
                  obj.xm = arr[i].familyName
                  obj.nl = arr[i].age
                  obj.gx = arr[i].familyRelation
                  obj.gzdw = arr[i].workPlace
                  obj.zy = arr[i].job
                  obj.jkzk = arr[i].health
                  obj.tel = arr[i].phone
                  obj.nsr = arr[i].yearMoney
                  obj.dw = arr[i].workPlace
                  this.formData.jtcyObj.push(obj)
                   this.formData.rkzs = arr.length+1
                }
                console.log(this.formData.jtcyObj);
              }
            }
          });

          })
        }
      },
      onSubmit(stu) { //提交申请
        console.log(stu)
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            if (stu == 1) { //新增认定
              this.formData.jtcy = JSON.stringify(this.formData.jtcyObj)
              this.formData.step = stu
              if (!this.formData.sqrqm) {
                Message({
                  message: '请上传签名图片',
                  type: 'error'
                })
                return
              }
              if(!this.formData.affixId){
                Message({
                  message: '请上传佐证材料',
                  type: 'error'
                })
                return
              }
              addApply(this.formData).then(res => {
                if (res.code == 200) {
                  this.$modal.msgSuccess("提交成功");
                  this.$tab.closePage();
                }
              })
            } else if (stu == 0) { //保存信息
              if(!this.formData.affixId){
                    Message({
                      message: '请上传佐证材料',
                      type: 'error'
                    })
                  return
                }
              this.formData.jtcy = JSON.stringify(this.formData.jtcyObj)
              this.formData.step = stu
              addApply(this.formData).then(res => {
                if (res.code == 200) {
                  this.$modal.msgSuccess("保存成功");
                  this.$tab.closePage();
                }
              })
            } else {
              if (stu == 2) {
                if (!this.formData.fdyqm) {
                  Message({
                    message: '请上传签名图片',
                    type: 'error'
                  })
                  return
                }
                if (!this.formData.bjpyyj) {
                  Message({
                    message: '请确认认定困难类型',
                    type: 'error'
                  })
                  return
                }
              }
              if (stu == 3) {
                if (!this.formData.ejxyldqm) {
                  Message({
                    message: '请上传签名图片',
                    type: 'error'
                  })
                  return
                }
                if (!this.formData.ejxyldqmyj) {
                  Message({
                    message: '请确认认定困难类型',
                    type: 'error'
                  })
                  return
                }
              }
              if (stu == 4) {
                if (!this.formData.xsqm) {
                  Message({
                    message: '请上传签名图片',
                    type: 'error'
                  })
                  return
                }
                if (!this.formData.xsqmyj) {
                  Message({
                    message: '请确认认定困难类型',
                    type: 'error'
                  })
                  return
                }
              }
         // if(this.formData.xsqmyj=='4'){

         // }
              this.$refs['formData'].validate((valid) => { //编辑
                if (valid) {
                  this.formData.jtcy = JSON.stringify(this.formData.jtcyObj)
                  this.formData.step = stu +1;
                  updateApply(this.formData).then(res => {
                    if (res.code == 200) {
                      console.log(66)
                      // this.$modal.msgSuccess("提交成功");
                      console.log(this.data.length)
                      if(this.data.length>1){
                        console.log(this.data.length)
                        console.log(this.indexs)
                        if(this.data.length-1==this.indexs){
                          this.$modal.msgSuccess("提交成功");
                          this.$tab.closePage();
                        }else{
                          this.$modal.msgSuccess("提交成功，下一个");
                          this.getApplyxq(this.data[this.indexs+1].id)
                          this.indexs=this.indexs+1
                          console.log(this.indexs)
                        }
                      }else{
                        this.$modal.msgSuccess("提交成功");
                        this.$tab.closePage();
                      }
                    }
                  })
                } else {
                  return false
                }
              })
            }
          } else {
            return false
          }
        })
      },
      handleAddRow() {
        if (this.formData.step != 1) {
          return
        }
        this.formData.jtcyObj.push({
          xm: "",
          nl: "",
          yxsgx: "",
          gzdw: "",
          zy: "",
          nsr: "",
          jkzk: "",
          gx: "",
          dw: ""
        })
      },
      handelIndex({
        row,
        rowIndex
      }) {
        row.index = rowIndex
        this.index = rowIndex
      },
      handelDel(row) {
        if (this.formData.step != 1) {
          return
        }
        if (this.formData.jtcyObj.length > 1) {
          this.formData.jtcyObj.splice(row.index, 1)
        } else {
          this.$message.error('至少保留一行')
        }
      },
      handleSignatureSuccess(response, file, fileList) {
        this.formData.sqrqm = response.fileName;
      },
      handleFdySignatureSuccess(response, file, fileLis) {
        this.formData.fdyqm = response.fileName;
      },
      handleEjxyldSignatureSuccess(response, file, fileLis) {
        this.formData.ejxyldqm = response.fileName;
      },
      handleXuexiaoSignatureSuccess(response, file, fileLis) {
        this.formData.xsqm = response.fileName;
      },
      //审核不通过
      no() {
        let step = this.formData.step;
        this.$prompt('请输入不通过原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',

        }).then(({
          value
        }) => {
          if (value != null && value != "") {
            console.log()
            let params = {
              "remark": value,
              "step": this.formData.step,
              "applyId": this.formData.id,
              "status": "0",
            }
            nopass(params).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.formData.step = this.formData.step + 1;
            });
          } else {
            this.$modal.msgError("请输入原因");
          }
        });
      },

    },
    computed: {
      income: function() {
        // return this.formData.jtcyObj.length
        let total = 0
        for (var i = 0; i < this.formData.jtcyObj.length; i++) {
          total += Number(this.formData.jtcyObj[i].nsr)
        }
        return this.formData.jtnsr = total.toFixed(2);
      },
      capita: function() {
        return this.formData.rjnsr = parseFloat(this.formData.jtnsr / this.formData.rkzs).toFixed(2)
      },
    }
  }
</script>

<style scoped>
  .rl {
    writing-mode: vertical-rl;
  }

  .form-blok {
    margin: 0 auto;
    width: 1095px;
    /* border: 1px solid #ebebeb; */
    border-radius: 3px;
    transition: .2s;
  }

  .source {
    text-align: center;

  }

  /* 表格样式 */
  .full-width {
    border-collapse: collapse;
    width: 1095px;
  }

  .full-width2 {
    border-collapse: collapse;
    width: 1095px;
  }

  td {
    padding: 8px 10px 8px 10px;
    min-width: 120px;
    /* max-width: 110px; */
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: center;
    border: 1px solid #000;
  }

  .table-label {
    min-width: 100px;
    background: #ededed;

  }

  .table-input {
    min-width: 100px;
    /* padding: 8px 0px; */
  }

  .table-align-left {
    padding: 8px 8px;
    text-align: left;
  }

  /* 学院专业班级信息 */
  .class-info {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

  }

  .class-info>>>.el-input__inner {

    /* text-align: right; */
  }

  .class-info div {
    height: 25px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .class-info div span {
    line-height: 25px;
  }

  /* 输入样式统一 */
  /deep/ .el-input__inner {
    border-width: 0px;

  }

  /* 表单样式统一 */
  /deep/ .el-form-item {
    margin-bottom: 0;
  }

  /deep/ .el-textarea__inner {
    border-width: 0px;
  }

  /deep/ .el-date-editor {
    width: 140px;
  }

  /deep/ .el-form-item__error {
    padding-left: 12px;
    position: relative;
    text-align: left;

  }

  .radio-group /deep/ .el-radio-group {
    width: 180px;

  }

  /*  */
  .radio-group-row {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-content: center;
    font-size: 14px;
    line-height: 20px;

  }

  .signature {
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-content: center;
    margin-right: 40px;
    flex-wrap: wrap;
  }

  .signature span {
    display: block;
    min-width: 50px;
    /* height: 36px;
        line-height: 36px; */
  }

  .signature>div {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .avatar {
    width: 117px;
    height: 156px;
  }

  /deep/ .el-upload {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .image-input {
    padding: 0;
    width: 120px;
    height: 160px;
  }

  .signature-img {
    width: 160px;
    height: 50px;
  }

  .signature-tip {
    width: 160px;
    cursor: pointer;
    color: #1890ff;
    text-align: left;

  }

  .qm {
    display: flex;
    flex-direction: column;
    align-content: center;

  }

  .qm>span {

    text-align: left;
    padding-left: 12px;
  }

  .qm>div {

    text-align: right;
    padding-right: 12px;
  }

  .qm>.avatar-uploader {
    padding: 12px 0px;
    text-align: center;
  }

  /deep/ .el-input.is-disabled .el-input__inner {
    background-color: #fff;
    color: #000;
  }

  .list .item {
    display: flex;
    flex-direction: row;
    justify-content: left;
  }

  .list .item span {
    padding: 10px;
  }

  .cm-affix {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
  }
</style>
